<!--
 @description 日期时间选择域
 @fileName index.vue
 @author zengqiongying
 @created 2022/10/30 15:45:35
-->
<template>
  <div class="c-field-datetime">
    <Cell
      :title="hideTitle?'':title"
      :value="curDate"
      :placeholder="placeholder"
      :required="required"
      :right="right"
      :input-align="inputAlign"
      :border="border"
      :cell-class-name="cellClassName"
      :left-icon="iconPosition==='left'?'calendar-o':''"
      :right-icon="iconPosition==='right'?'calendar-o':''"
      is-input
      click-input
      readonly
      @right="handleClickDate"
      @clear="handleClickClear"
    />
    <PopDateTimePicker
      v-model="showDate"
      :title="title"
      :default-value="defaultDate"
      :min-date="curMinDate"
      :max-date="curMaxDate"
      :calendar-type="calendarType"
      :show-time="showTime"
      :clear="showClear"
      @change="onConfirmDate"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Cell from '../ListCell'
import PopDateTimePicker from '../PopDateTimePicker'
export default {
  name: 'FieldDateTime',
  components: { Cell, PopDateTimePicker },
  inheritAttrs: true,
  props: {
    title: {
      type: String,
      default: undefined
    },
    hideTitle: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Array],
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    minDate: {
      type: Date,
      default: null
    },
    maxDate: {
      type: Date,
      default: null
    },
    type: {
      type: String,
      default: 'date' // 日期类型（date 单个日期，daterange 日期范围,datetime  日期时间，datetimerange 日期时间范围）
    }, // 日历选择类型：single表示选择单个日期，range 表示选择日期区间,multiple表示选择多个日期(暂不支持)
    defaultDate: {
      type: [String, Array],
      default: ''
    },
    clear: {
      // 是否显示清除按钮
      type: Boolean,
      default: false
    },
    right: {
      // 是否显示右侧箭头
      type: Boolean,
      default: true
    },
    inputAlign: {
      // 输入框对齐方式：left/ right
      type: String,
      default: 'right'
    },
    border: {
      // 是否有边框
      type: Boolean,
      default: true
    },
    cellClassName: {
      type: String,
      default: ''
    },
    iconPosition: {
      // 日历图标位置：left /right
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curDate: '',
      showDate: false
    }
  },

  computed: {
    curMinDate() {
      if (this.minDate) {
        return this.minDate
      }
      const date = new Date()
      const sDate = new Date().setFullYear(date.getFullYear() - 2)
      return new Date(sDate)
    },
    curMaxDate() {
      if (this.maxDate) {
        return this.maxDate
      }
      const date = new Date()
      const sDate = new Date().setMonth(date.getMonth() + 6)
      return new Date(sDate)
    },
    showTime() {
      return this.type === 'datetime' || this.type === 'datetimerange'
    },
    calendarType() {
      if (this.type === 'datetime' || this.type === 'date') {
        return 'single'
      }
      if (this.type === 'datetimerange' || this.type === 'daterange') {
        return 'range'
      }
      return 'single'
    },
    showClear() {
      if (!this.clear) return false
      if (this.value instanceof Array) {
        return this.value.length > 0
      }
      return !!(this.value)
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val instanceof Array) {
          if (val.length > 0) {
            this.curDate = val.length === 2 ? val.join(' ~ ') : val[0]
          } else {
            this.curDate = ''
          }
        } else {
          this.curDate = val
        }
      },
      immediate: true
    }
  },

  created() {

  },
  mounted() {},

  methods: {
    handleClickDate() {
      if (this.disabled) return
      this.showDate = true
    },
    handleClickClear() {
      this.curDate = ''
    },
    onConfirmDate(date) {
      if (this.type === 'daterange') {
        this.curDate = `${parseTime(date[0], '{y}-{m}-{d}')}  ~  ${parseTime(date[1], '{y}-{m}-{d}')}`
      } else if (this.type === 'datetimerange') {
        this.curDate = `${parseTime(date[0], '{y}-{m}-{d} {h}:{i}:{s}')}  ~  ${parseTime(date[1], '{y}-{m}-{d} {h}:{i}:{s}')}`
      } else if (this.type === 'datetime') {
        this.curDate = parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
      } else {
        this.curDate = parseTime(date, '{y}-{m}-{d}')
      }
      this.$emit('input', date)
      this.showDate = false
    }
  }
}

</script>
<style lang='less' scoped>
</style>
